<? include "$_SERVER[DOCUMENT_ROOT]/_guide/coding/inc_head.html"; ?>



<h2>이미지 가이드</h2>

<h3>1. 이미지 포맷</h3>
<ul class="notice-txt">
	<li>PC웹 기본 포맷은 GIF를 사용한다.</li>
	<li>JPG는 인물이나 실사 이미지와 같이, 색 변화 및 그라데이션이 풍부한 경우 및 운영성 이미지에 주로 사용한다.</li>
	<li>반투명 효과 적용시 PNG-24를 사용한다.(ie6 에서는 PNG 반투명 미지원)</li>
</ul>

<h3>2. 이미지 스프라이트</h3>
<ul class="notice-txt">
	<li>운영성 이미지 성격이 아닌 아이콘 또는 장식을 위한 이미지 요소들은 스프라이트 기법을 활용하여 파일의 Size, Request 최소화를 도모한다.</li>
	<li>스프라이트는 수직정렬 (vertical)형과 바둑판(tile)형 중 서비스에 따라 선택하여 사용</li>
	<li>수직 정렬형 스프라이트는 개체 수가 늘어남에 따라 공간 또한 늘어나 용량 이슈가 발생하므로 모바일 환경에서는 바둑판형 스프라이트로 진행한다. (비교표 참조)</li>
	<li>각 스프라이트 집합은 타이틀, 버튼, 아이콘, 메뉴(GNB 또는 Tab), 숫자 등 용도별로 나누어 그룹핑</li>
</ul>

<h3>3. css3와 이미지</h3>
<ul class="notice-txt">
	<li>box-shadow / border-radius 속성은 ie9 이상에서 지원 가능하다.</li>
	<li>ie8 이하에서도 동일하게 적용되어야 한다면 이미지를 사용한다.(버튼, 박스 등)</li>
</ul>
<div style="box-shadow:5px 5px 5px #333;border-radius:15px;width:200px;height:130px;padding-top:70px;border:3px solid gray;text-align:center;">
box-shadow<br />border-radius<br />ie9 이상 지원<br />
<script type="text/javascript">
if($.browser.msie){
	document.write("현재 IE버전 : "+$.browser.version)
}
</script>
</div>






<? include "$_SERVER[DOCUMENT_ROOT]/_guide/coding/inc_foot.html"; ?>